<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #2f3542;
        }

        .big span {
            position: absolute;
            width: 150px;
            height: 150px;
            margin-left: 108px;
            margin-top: 112px;
        }


        .big div {
            position: absolute;
            width: 300px;
            height: 300px;
        }

        .big {
            z-index: 2;
            height: 350px;
            width: 350px;
            margin: 200px auto;
            transform-style: preserve-3d;
            animation: roll 9s infinite;
        }

        .big div img {
            opacity: 0.5;
            width: 100%;
            height: 100%;
        }

        .big span img {
            width: 100%;
            height: 100%;
        }

        /* 左右前后上下 */

        .img3 {
            transform: translateX(-75px) rotateY(90deg);
        }

        .img4 {
            transform: translateX(75px) rotateY(90deg);
        }

        .img1 {
            transform: translateZ(75px);
        }

        .img2 {
            transform: translateZ(-75px);
        }

        .img5 {
            transform: translateY(-75px) rotateX(90deg);
        }

        .img6 {
            transform: translateY(75px) rotateX(90deg);
        }


        .img3_3 {
            transform: translateX(-150px) rotateY(90deg);
        }

        .img4_4 {
            transform: translateX(150px) rotateY(90deg);
        }

        .img1_1 {
            transform: translateZ(150px);
        }

        .img2_2 {
            transform: translateZ(-150px);
        }

        .img5_5 {
            transform: translateY(-150px) rotateX(90deg);
        }

        .img6_6 {
            transform: translateY(150px) rotateX(90deg);
        }

        @keyframes roll {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }

            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .big:hover .img1_1 {
            transform: translateZ(300px);
        }

        .big:hover .img2_2 {
            transform: translateZ(-300px);
        }

        .big:hover .img3_3 {
            transform: rotateY(90deg) translateZ(-300px);
        }

        .big:hover .img4_4 {
            transform: rotateY(-90deg) translateZ(-300px);
        }

        .big:hover .img5_5 {
            transform: rotateX(90deg) translateZ(300px);
        }

        .big:hover .img6_6 {
            transform: rotateX(-90deg) translateZ(300px);
        }
    </style>
</head>
<link rel="stylesheet" href="rotate.css">

<body>
    <main>
        <div class="big">
            <div class="img1_1"><img
                    src="https://images.pexels.com/photos/29674314/pexels-photo-29674314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></div>
            <div class="img2_2"><img
                    src="https://w.wallhaven.cc/full/rr/wallhaven-rrmoew.jpg"
                    alt=""></div>
            <div class="img3_3"><img
                    src="https://images.pexels.com/photos/28638641/pexels-photo-28638641.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></div>
            <div class="img4_4"><img
                    src="https://images.pexels.com/photos/29674315/pexels-photo-29674315.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></div>
            <div class="img5_5"><img
                    src="https://images.pexels.com/photos/29673954/pexels-photo-29673954.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></div>
            <div class="img6_6"><img
                    src="https://images.pexels.com/photos/29700712/pexels-photo-29700712.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></div>

            <span class="img1"><img
                    src="https://images.pexels.com/photos/29735431/pexels-photo-29735431.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></span>
            <span class="img2"><img
                    src="https://images.pexels.com/photos/29749744/pexels-photo-29749744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></span>
            <span class="img3"><img
                    src="https://images.pexels.com/photos/29702319/pexels-photo-29702319.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></span>
            <span class="img4"><img
                    src="https://images.pexels.com/photos/29700713/pexels-photo-29700713.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></span>
            <span class="img5"><img
                    src="https://images.pexels.com/photos/29700706/pexels-photo-29700706.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></span>
            <span class="img6"><img
                    src="https://images.pexels.com/photos/29700701/pexels-photo-29700701.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt=""></span>
        </div>
    </main>
</body>

</html>